import './style.css'
class HaxagonWall {
  constructor(opt) {
    let { arr, height, elem, border, borderColor, callback, center } = opt;
    if (!elem && !document.querySelector(elem) && !arr && arr.length == 0) {
      return;
    }
    this.data = arr
    this.elem = elem;
    this.center = center
    this.height = ( height || 110 );
    this.border = border ? border < 2 ? 2 : border : 4;
    this.borderColor = borderColor || '#f0f0f0';
    this.width = this.height / 2 / 0.55;
    this.callback = callback || null;

    this.hexW = this.width - this.border * 2
    this.hexH = this.height - this.border * 2
    this.init();
  }
  init() {
    this.craeteBaseElem();
    this.createDefaultElem();
    this.setContent();
    this.setBaseStyle();
    this.bindEventClick();
  }
  // 绑定点击事件
  bindEventClick() {
    if (!this.callback) return;
    let oContents = this.wrapElem.querySelectorAll('.hex-content');
    oContents.forEach(v => {
      v.addEventListener('click', () => {
        this.callback(v.parentNode.dataset.index, v)
      })
    })
  }
  // 创建li标签按照规则装进ul元素
  setContent() {
    this.data.forEach((item, index) => {
      let oLi = this.createHexElem(item);
      oLi.dataset.index = index
      let oLi2;
      if (index == 0) {
        this.wrapElem.querySelectorAll('ul')[0].appendChild(oLi)
      } else if (index == 1) {
        this.wrapElem.querySelectorAll('ul')[4].appendChild(oLi)
      } else {
        let i = Math.ceil(index / 10) - 1;
        let parentElem = this.wrapElem.querySelectorAll('ul')[Math.abs(( index - 2 ) / 2 - ( i * 5 ))]
        if (index % 2 == 0) {
          if (this.data[index + 1]) {
            parentElem.insertBefore(oLi, parentElem.children[0])
            oLi2 = this.createHexElem(this.data[index + 1])
            oLi2.dataset.index = index + 1
            parentElem.appendChild(oLi2)
          } else {
            
            parentElem.insertBefore(oLi, parentElem.children[0])
            parentElem.appendChild(this.createEmptyElem())
          }
        }
      }
    })
    
  }
  // 创建一个空节点
  createEmptyElem() {
    let liElem = document.createElement('li');
    return liElem
  }
  // 创建默认ul元素
  createDefaultElem() {
    this.wrapElem.querySelectorAll('ul')[1].appendChild(this.createHexElem())
    this.wrapElem.querySelectorAll('ul')[1].appendChild(this.createHexElem())
    this.wrapElem.querySelectorAll('ul')[2].appendChild(this.createHexElem())
    this.wrapElem.querySelectorAll('ul')[2].appendChild(this.createHexElem())
    this.wrapElem.querySelectorAll('ul')[2].appendChild(this.createHexElem())
    this.wrapElem.querySelectorAll('ul')[3].appendChild(this.createHexElem())
    this.wrapElem.querySelectorAll('ul')[3].appendChild(this.createHexElem())
  }
  // 创建基本 li 元素
  createHexElem(imgUrl) {
    let liElem = document.createElement('li');
    let oParent = this.createBaseHex(this.borderColor, this.width)
    let oChild = this.createBaseHex('#fff', this.width - this.border * 2)
    liElem.appendChild(oParent)
    liElem.appendChild(oChild)

    if (imgUrl) {
      let oDiv = document.createElement('div');
      oDiv.className = 'hex-content';
      oDiv.style.backgroundImage = "url(" + imgUrl + ")"
      liElem.appendChild(oDiv)
    }
    return liElem;
  }
  // 创建中间元素
  createCenterElem() {
    let oDiv = this.createBaseHex('#fff', this.height * 1.6, this.center)
    this.wrapElem.appendChild(oDiv);
  }
  // 创建基本六边形元素
  createBaseHex(borderColor, baseW, center) {
    let oDiv = document.createElement('div');
    oDiv.className = 'hex-center';

    let oSpan = document.createElement('span');
    let oTop = document.createElement('span');
    let oBottom = document.createElement('span');
    oSpan.className = 'hexIn-center'
    oTop.className = 'hex-center-top'
    oBottom.className = 'hex-center-bottom'

    oDiv.appendChild(oSpan);
    oDiv.appendChild(oTop);
    oDiv.appendChild(oBottom);

    oSpan.style.width = oDiv.style.width = baseW + 'px';
    oSpan.style.height = oDiv.style.height = baseW * 0.55 + 'px'
    oTop.style.width = oBottom.style.width = baseW / 2 + 'px';
    oTop.style.left = oBottom.style.left = baseW / 4 + 'px';
    oTop.style.height = oBottom.style.height = baseW / 2 * 1.16 + 'px'
    oTop.style.top = -baseW / 2 * 1.16 / 2 + 'px'
    oBottom.style.bottom = -baseW / 2 * 1.16 / 2 + 'px'
    oBottom.style.backgroundColor = oTop.style.backgroundColor = oSpan.style.backgroundColor = oDiv.style.backgroundColor = borderColor

    if (center) {
      oSpan.style.backgroundImage = "url(" + this.center + ")"
      oDiv.style.boxShadow = oTop.style.boxShadow = oBottom.style.boxShadow = '0 0 10px 1px rgba(0,0,0,0.2)'
    }

    return oDiv
  }
  // 创建基本外层元素
  craeteBaseElem() {
    this.wrapElem = document.createElement('div');
    this.wrapElem.className = 'hex-wrap'

    for (let i = 0; i < 5; i++) {
      this.wrapElem.appendChild(document.createElement('ul'))
    }

    document.querySelector(this.elem).appendChild(this.wrapElem)
    this.createCenterElem()
  }
  // 设计基本样式
  setBaseStyle() {
    this.wrapElem.style.marginTop = this.height / 4 + 'px'
    let oUls = this.wrapElem.querySelectorAll('ul');
    let oHex = this.wrapElem.querySelectorAll('li');
    let oHexC = this.wrapElem.querySelectorAll('li .hexIn-level-1');
    let oHex3 = this.wrapElem.querySelectorAll('li .hex-level-3'); 

    oHex.forEach((item) => {
      item.style.width = this.width + 'px'
      item.style.height = this.height + 'px'
    })

    oHexC.forEach((item) => {
      item.style.width = this.width - this.border * 2 + 'px'
      item.style.height = this.height - this.border * 2 + 'px'
      item.style.top = this.border + 'px'
      item.style.left = this.border + 'px'
    })
    oHex3.forEach((item) => {
      item.style.backgroundColor = this.borderColor
    })

    oUls.forEach(item => {
      let oLis = item.querySelectorAll('li');

      if (oLis.length > 0) {
        let mt = this.height / 4
        item.style.marginTop = -mt + 'px';

        if (oLis.length > 1) {
          let count = oLis.length / 2;
  
          if (count == 1 || count % 2 == 0) {
            for (let i = 1; i <= count; i++) {
              oLis[i - 1].style.marginRight = -this.border / 2 + 'px';
              oLis[oLis.length - i].style.marginLeft =  -this.border / 2 + 'px';
            }
          } else {
            count = Math.floor(count);
            for (let i = 1; i <= count; i++) {
              oLis[i - 1].style.marginRight = -this.border / 2 + 'px';
              oLis[oLis.length - i].style.marginLeft =  -this.border / 2 + 'px';
            }
          }
        }
      }
    })
  }
}

window._haxagonWall = function(opt) {
  new HaxagonWall(opt)
}